<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/themes/metro/easyui.css" />
    <link rel="stylesheet" href="./lib/themes/icon.css" />
</head>
<body>
    <div id="app" >
        <h3 data-bind="text:text" ></h3>
        <ko-linkbutton params="options:{text:'添加'}" data-bind="click:add" ></ko-linkbutton>
        <ko-linkbutton params="options:{text:'修改dialog'}" data-bind="click:reDialog" ></ko-linkbutton>
        <ko-textbox params="options:{iconCls:'icon-search', value:text}" ></ko-textbox>
        <ko-combobox params = "options:{data:data, valueField:'id', textField:'name',formatter:formatter}" ></ko-combobox>
        <ko-combogrid id="grid" params = "options:{data:data,idField:'id', textField:gridField, columns:[[{field:'id', title:'序号'}, {field:'name', title:'姓名'}]]}" ></ko-combogrid>
        <ctest params="text:text" ></ctest>
        <ko-messager params="options:{ title: dialog.title }" ></ko-messager>
        <ko-dialog params="options:{title:dialog.title,content:'aaaaaaaa', modal:modal}" >
        </ko-dialog>
    </div>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.easyui.min.js"></script>
    <script src="./lib/locale/easyui-lang-zh_CN.js"></script>
    <script src="./lib/knockout-3.5.0.js" ></script>
    <script src="/koeasyui.js"></script>
    <script>
        koeasyui.use(window.ko);
        var rootVm={
            text: ko.observable('text'),
            data: ko.observableArray([{id:1,name:'sam'},{id:2,name:'dargon'}]),
            formatter:function(text){
                return 'text:' + text.name;
            },
            dialog:{
                title: ko.observable('ko-messager测试')
            },
            modal:ko.observable(true),
            gridField:ko.observable('name'),
            add:function(){
                var gridata = koeasyui.getContextFor(document.getElementById('grid'));
                console.log(gridata.getData());
                this.data.push({id:3,name:'daibi'});//测试reflow
                this.gridField('id');//测试repaint
            },
            reDialog:function(){
                var dh = koeasyui.getContextFor(document.getElementsByTagName('ko-dialog')[0]);
                this.dialog.title('aaa');
            }
        };
        ko.components.register('ctest',{
            template:'<div><ko-textbox params="options:{iconCls:\'icon-search\', value:text}" ></ko-textbox></div>',
            viewModel:function(params, compConfig){
                this.text = params.text;
            }
        });
        ko.applyBindings(rootVm, document.getElementById('app'));
    </script>
</body>
</html>